<template>
  <div class="form-container">
    <a-form :form="form">
      <a-row>
        <a-col :span="9">
          <a-form-item label="指标名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" style="margin-bottom: 0;">
            <a-select
              v-decorator="[
                'gender',
                {
                  initialValue: 'T/F类型'
                }
              ]"
              placeholder="Select a option and change input text above"
            >
              <a-select-option value="T/F类型">
                T/F类型
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="14" :offset="1">
          <a-form-item label="指标描述" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" style="margin-bottom: 0;">
            <a-input
              v-decorator="[
                'gender',
                {
                  initialValue: 'T/F类型'
                }
              ]"
              placeholder="Select a option and change input text above"
            >
              <a-select-option value="T/F类型">
                T/F类型
              </a-select-option>
            </a-input>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <Table class="table" />
        </a-col>

        <a-col :span="24">
          <div class="submit-container">
            <a-button type="primary">
              提 交
            </a-button>
            <a-button class="button">取 消</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import Table from './Table.vue'

export default {
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },

  components: {
    Table,
  },
}

</script>

<style lang="scss" scoped>
.table {
  margin-top: $margin-sm;
}

.submit-container {
  margin-top: $margin-sm;
  .button {
    margin-left: $margin-xs;
  }
}
</style>
